import { View, type ViewStyle } from "react-native";
import { type ReactNode } from "react";
type ViewParamsProps = { children?: ReactNode, style?: ViewStyle }

/**
 * @description "仿造NativeBase的HStack"
 * @link https://docs.nativebase.io/hstack
 */
export function HStack({ style, children, ...rest }: ViewParamsProps) {
    return <View
        {...rest}
        style={{ flexDirection: "row", flex: 1, ...style }}>
        {children}
    </View>
}

/**
 * @description "仿造NativeBase的VStack"
 * @link https://docs.nativebase.io/vstack
 */
export function VStack({ style, children, ...rest }: ViewParamsProps) {
    return <View
        {...rest}
        style={{ flexDirection: "column", flex: 1, ...style }}>
        {children}
    </View>
}

/**
 * @description "仿造NativeBase的VStack"
 * @link https://docs.nativebase.io/center
 */
export function Center({ style, children, ...rest }: ViewParamsProps) {
    return <View
        {...rest}
        style={{
            flex: 1,
            alignItems: "center", justifyContent: "center", ...style
        }}>
        {children}
    </View>
}
